<script setup>
import HomePanel from './HomePanel.vue'
import { onMounted, ref } from 'vue'
import GoodsItem from './GoodsItem.vue'
import goodsImg1 from '@/assets/uploads/商品介绍卡片-居家.png'
import goodsImg2 from '@/assets/uploads/商品介绍卡片-服饰.png'
import goodsImg3 from '@/assets/uploads/商品介绍卡片-餐厨.png'
import goodsImg4 from '@/assets/uploads/商品介绍卡片生鲜.png'

// 使用静态数据和本地图片
const goodsProduct = ref([
  {
    id: 1,
    name: '生鲜果蔬',
    saleInfo: '时令新鲜 健康生活',
    picture: goodsImg4,
    goods: [
      { id: 101, name: '北欧风格居家装饰', desc: '简约现代 环保材质', price: 299, picture: goodsImg1 },
      { id: 102, name: '时尚休闲服饰套装', desc: '舒适透气 潮流设计', price: 399, picture: goodsImg2 },
      { id: 103, name: '精品陶瓷餐具套装', desc: '高温烧制 健康环保', price: 199, picture: goodsImg3 },
      { id: 104, name: '新鲜有机水果礼盒', desc: '当日采摘 品质保证', price: 129, picture: goodsImg4 }
    ]
  },
  {
    id: 2,
    name: '肉禽蛋品',
    saleInfo: '新鲜安全 营养美味',
    picture: goodsImg3,
    goods: [
      { id: 201, name: '多功能收纳箱', desc: '大容量 可折叠', price: 89, picture: goodsImg1 },
      { id: 202, name: '纯棉针织衫', desc: '柔软亲肤 百搭款式', price: 159, picture: goodsImg2 },
      { id: 203, name: '厨房小电器套装', desc: '智能控制 节能省电', price: 499, picture: goodsImg3 },
      { id: 204, name: '有机蔬菜组合包', desc: '无农药 新鲜配送', price: 69, picture: goodsImg4 }
    ]
  }
])

// 保留初始化函数以维持兼容性
const getGoods = async () => {
  // 已经有静态数据，不需要再请求
  console.log('使用静态商品模块数据')
}

// 组件挂载时仍调用函数，保持原有的行为模式
onMounted(() => getGoods())
</script>

<template>
  <div class="home-product">
    <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      <div class="box">
        <RouterLink class="cover" to="/">
          <img v-img-lazy="cate.picture" />
        </RouterLink>
        <ul class="goods-list">
          <li v-for="goods in cate.goods" :key="goods.id">
            <GoodsItem :goods="goods" />
            <GoodsItem :goods="goods" />
          </li>
        </ul>
      </div>
    </HomePanel>
  </div>
</template>

<style scoped lang='scss'>
.home-product {
  background: #fff;
  margin-top: 20px;

  .sub {
    margin-bottom: 2px;

    a {
      padding: 2px 12px;
      font-size: 16px;
      border-radius: 4px;

      &:hover {
        background: $xtxColor;
        color: #fff;
      }

      &:last-child {
        margin-right: 80px;
      }
    }
  }

  .box {
    display: flex;

    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;

        span {
          display: block;
          width: 100px;
          text-align: center;
          color: #fff;
          padding: 8px 0;
          margin-bottom: 5px;
          font-weight: bold;

          &:first-child {
            background: rgba(0, 0, 0, 0.9);
            font-size: 18px;
          }

          &:last-child {
            background: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            margin-bottom: 0;
          }
        }
      }
    }

    .goods-list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }


  }
}
</style>